03饼状图

饼状图 Sample详情

最后更新时间：2019年6月17日

饼状图，用每个的弧度表示数据数量的比例。主要用于表现不同类目的数据在总和中的占比。例如：在工作中如果遇到需要计算总费用或金额的各个部分构成比例的情况，一般都是通过各个部分与总额相除来计算，且这种比例表示方法很抽象，我们可以使用一种饼形图表工具，能够直接以图形的方式直接显示各个组成部分所占比例。具体实现方法如下：

构造ChartView

与折线图实现方法一样，在xml布局中添加ChartView控件，在此不赘述。

获取待统计的数据

根据实际需求选择合适的数据来源，可参考折线图此部分实现方法。

构造统计图表对象

//创建图表数据
ArrayList<PieData> pieDataLst = new ArrayList<PieData>();
for (int i = 0; i < provinceName.size(); i++) {
    pieDataLst.add(new PieData(provinceName.get(i), peopleNumber.get(i)));
}
//创建饼状图
PieSeries pieSeries = new PieSeries();
//设置名称（必须设置）
pieSeries.setName("2017人口数");
//添加饼图数据
pieSeries.setLisPieData(pieDataLst);
//设置半径
pieSeries.setRadius(60f);

配置图表各项参数

设置各项参数后即可显示饼状图。

创建配置参数

Option mOption = new Option();

设置标题及标题样式

Title title=new Title();
title.setText("武汉市人口数大于550000的区_饼状图");
title.setAlignType(AlignType.center);
TextStyle textStyle=new TextStyle();
textStyle.setFontSize(14);
textStyle.setColor(Color.argb(1, 47, 69, 84));
title.setTextStyle(textStyle);
mOption.setTitle(title);

设置提示框及触发类型

Tooltip tooltip=new Tooltip();
tooltip.setTrigger(TriggerType.item);
tooltip.formatter("%");
mOption.setTooltip(tooltip);

创建图例

Legend legend = new Legend();
//设置是否显示
legend.setShow(true);
//设置组件的位置(左、上、右、下)
legend.setPosition(0, 0.2f, 0.3f, 0.1f);
//设置布局方式，默认为水平布局，可选为：'horizontal' | 'vertical'
legend.setOrient(OrientType.vertical);
//设置图例图形宽度 单位px
legend.setItemWidth(10);
//设置主副标题纵向间隔，单位px
legend.setItemGap(5);
//设置文本样式
legend.setTextStyle(new TextStyle().setFontSize(9));
//设置图例
mOption.setLegend(legend);

设置图表数据

mOption.setSeries(pieSeries);

设置配置参数

mChartView.setOption(mOption);

显示效果如下图所示：

饼状图.jpg

动态图表

普通情况下图表展示的是固定静态的数据，有时需要展示数据的变动情况，就需要使用到时间轴，从而可以将图表展示为动态形式的。时间轴通常与传统图表结合使用，通过时间轴可以播放、暂停、继续播放、停止播放时空数据；常用来强调数据随时间的变动，如一年的降雨量、气温的变化，一天中潮汐的变化。

接下来展示如何将时间轴与饼状图结合，折线图、柱状图、仪表盘要实现动态效果方法与此类似。首先需要准备时间轴的数据，然后在创建基本饼状图的基础上增加时间轴的信息配置即可。

//创建时间轴数据
ArrayList<TimeLineData> timeDataLst = new ArrayList<TimeLineData>();
timeDataLst.add(new TimeLineData("2010-01-01"));
timeDataLst.add(new TimeLineData("2013-01-01"));
timeDataLst.add(new TimeLineData("2017-01-01"));
//设置图表时间轴
TimeLine timeLine = new TimeLine();
timeLine.setTimelineDataLst(timeDataLst);                    //设置时间轴数据
timeLine.setControlPositionType(ControlPositionType.left);   //设置播放控制器位置
timeLine.setPosition(20, 200, 20, 0);                        //设置组件的位置（单位像素）
mOption.setTimeline(timeLine);                               //设置图表时间轴
//设置配置参数
mChartView.setOption(mOption);

动态图表.jpg